<template>
  <el-form :inline="true" label-position="right" size="small" label-width="120px" class="filter-form-inline">
    <el-row :gutter="40" style="margin-left: 0px;margin-right:0px;">
      <el-col :span="8">
        <el-form-item label="流程编号：" style="width: 100%;">
          {{ detailData.processNo }}
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="创建时间：" style="width: 100%;">
          {{ dateFormat('yyyy-mm-dd HH:MM',detailData.startTime) }}
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="创建人：" style="width: 100%;">
          {{ detailData.initiator }}
        </el-form-item>
      </el-col>
      <template v-if="route.query.type === 'sellerFactorCreate' || route.query.type ===  'sellerFactorBan'">
        <el-col :span="8">
          <el-form-item label="商销客户名称：">
            <span>
              {{ detailData?.data?.sellerDetail?.sellerName }}
            </span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="企业所在地区：">
            <span v-if="detailData?.data?.provinceName">
              {{ detailData?.data?.provinceName }}/ {{ detailData?.data?.cityName }}/
              {{ detailData?.data?.areaName }}
            </span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="详细地址：">
            {{ detailData?.data?.sellerDetail?.address }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="产品名称：" style="width: 100%;">
            <toolTip :title=" detailData?.data?.productInfoDetail?.productPopularName" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="通用名：" style="width: 100%;">
            {{ detailData?.data?.productInfoDetail?.productName }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="包装规格：" style="width: 100%;">
            {{ detailData?.data?.productInfoDetail?.packSpecs }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="生产厂家：" style="width: 100%;">
            {{ detailData?.data?.productInfoDetail?.producer }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="交易价：" style="width: 100%;">
            {{ detailData?.data?.tradePrice }}
            <span v-if="detailData?.data?.productInfoDetail?.sellUnit">
              元 /{{ getLabel('sell_unit', detailData?.data?.productInfoDetail?.sellUnit) }}
            </span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="负责营销职员：" style="width: 100%;">
            {{ detailData?.data?.headName }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="其他约定：" style="width: 100%;">
            {{ detailData?.data?.remark }}
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="detailData?.data?.banReason">
          <el-form-item label="作废原因：" style="width: 100%;">
            {{ detailData?.data?.banReason }}
          </el-form-item>
        </el-col>
      </template>

      <template v-if="route.query.type === 'sellerFactorChange'">
        <el-col :span="8">
          <el-form-item label="商销客户名称：">
            <span>
              {{ detailData?.data?.Old?.sellerDetail?.sellerName }}
            </span>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="产品信息：" style="width: 100%;">
            <toolTip :title="getProductName(detailData?.data?.Old?.productInfoDetail)" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="交易价：">
            <span>
              <span v-if=" detailData?.data?.New?.tradePrice === detailData?.data?.Old?.tradePrice">
                {{ detailData?.data?.Old?.tradePrice }}
              </span>
              <span v-else>
                <span>{{detailData?.data?.Old?.tradePrice}}</span>
                <span style="padding: 0 15px 0 15px;">-></span>
                <span class="flow-status-color">{{detailData?.data?.New?.tradePrice}}</span>
              </span>

              <span v-if="detailData?.data?.Old?.productInfoDetail.sellUnit">
                元 /{{ getLabel('sell_unit',detailData?.data?.Old?.productInfoDetail.sellUnit)}}
              </span>
            </span>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="负责营销职员：">
            <div v-if=" detailData?.data?.New?.headName === detailData?.data?.Old?.headName">
              {{ detailData?.data?.Old?.headName }}
            </div>
            <div v-else>
              <span>{{detailData?.data?.Old?.headName}}</span>
              <span style="padding: 0 15px 0 15px;">-></span>
              <span class="flow-status-color">{{detailData?.data?.New?.headName}}</span>
            </div>

          </el-form-item>
        </el-col>

        <el-col :span="21">
          <el-form-item label="其他约定：">
            <div v-if=" detailData?.data?.New?.remark === detailData?.data?.Old?.remark">
              {{ detailData?.data?.Old?.remark }}
            </div>
            <div v-else>
              <span>{{detailData?.data?.Old?.remark}}</span>
              <span style="padding: 0 15px 0 15px;">-></span>
              <span class="flow-status-color">{{detailData?.data?.New?.remark}}</span>
            </div>
          </el-form-item>
        </el-col>

      </template>

    </el-row>
  </el-form>
</template>

<script>
import { reactive, toRefs, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
export default {
  props: {
    detailData: {
      type: Object,
      default() {
        return {
          data: {},
        };
      },
    },
  },
  setup(props, context) {
    const router = useRouter();
    const route = useRoute();
    const data = reactive({
      detailData: {},
    });

    watch(
      () => props.detailData,
      (newval, oldval) => {
        if (newval) {
          data.detailData = newval;
          console.log(newval);
        }
      },
      { immediate: true, deep: true }
    );

    return {
      ...toRefs(data),
      route,
    };
  },
};
</script>

<style lang="scss" scoped>
</style>